<template>
  <el-table :data="tableData" :height="height" class="local-music-table"
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseLeave">
    <el-table-column width="60">
      <template #default="scope">
        <div v-if="hoveredRow === scope.row.id" class="play-icon">
          <el-icon v-if="isPlaying(scope.row)" @click="togglePlay(scope.row)">
            <i-bi-pause-fill />
          </el-icon>
          <el-icon v-else @click="togglePlay(scope.row)">
            <i-bi-play-fill />
          </el-icon>
        </div>
        <span v-else>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>

    <el-table-column label="标题" prop="name" min-width="400">
      <template #default="scope">
        <div class="song-info">
          <span class="song-name">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="歌手" prop="singer" min-width="200">
      <template #default="scope">
        <span>{{ scope.row.singer[0].name }}</span>
      </template>
    </el-table-column>

    <el-table-column label="时长" prop="duration" width="100" align="right">
      <template #default="scope">
        <span>{{ formatDuration(scope.row.duration) }}</span>
      </template>
    </el-table-column>

    <el-table-column label="大小" prop="size" width="100" align="right">
      <template #default="scope">
        <span>{{ formatFileSize(scope.row.size) }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { usePlayStore } from '@/store/PlayStore'
import emitter from '@/store/emitter'
import type { LocalSong, PlayableSong } from '@/assets/apis/MusicDataType'

const props = defineProps({
  tableData: {
    type: Array as () => LocalSong[],
    required: true
  },
  height: {
    type: [String, Number],
    default: 'auto'
  }
})

const playStore = usePlayStore()
const hoveredRow = ref(null)

const isPlaying = computed(() => (song: LocalSong) => {
  return playStore.isPlayed && playStore.currentSong?.url === song.url
})

function togglePlay(song: LocalSong) {
  const playableSong: PlayableSong = {
    id: song.url,
    name: song.name,
    singer: song.singer,
    duration: song.duration,
    url: song.url
  }

  if (isPlaying.value(song)) {
    emitter.emit('playAudioType', 'play')
  } else {
    playStore.selectPlay([playableSong])
  }
}

function formatDuration(ms) {
  if (!ms) return '0:00'
  const minutes = Math.floor(ms / 60000)
  const seconds = Math.floor((ms % 60000) / 1000)
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
}

function formatFileSize(bytes) {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

function handleMouseEnter(row) {
  hoveredRow.value = row.id
}

function handleMouseLeave() {
  hoveredRow.value = null
}
</script>

<style lang="scss" scoped>
.local-music-table {
  :deep(.el-table__inner-wrapper) {
    background-color: transparent;
    
    .el-table__header-wrapper {
      th {
        background-color: transparent;
        border: none;
        color: var(--el-text-color-secondary);
        font-weight: normal;
      }
    }

    .el-table__body-wrapper {
      tr {
        background-color: transparent;
        cursor: pointer;
        
        &:hover {
          background-color: var(--el-fill-color-light);
        }

        td {
          border: none;
        }
      }
    }
  }

  .play-icon {
    display: flex;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    color: var(--el-text-color-regular);
    
    &:hover {
      color: var(--el-color-primary);
    }
  }

  .song-info {
    display: flex;
    align-items: center;
    
    .song-name {
      font-size: 14px;
      color: var(--el-text-color-primary);
    }
  }
}
</style> 